<template>
  <div>
    <px-row style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-form-item label="厂区">
              <px-select v-model="queryParams.systemCode" placeholder="请选择厂区" clearable style="width: 210px" filterable>
                <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.itemValue" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-form-item label="产品">
              <px-select v-model="queryParams.systemCode" placeholder="请选择厂区" clearable style="width: 210px" filterable>
                <px-option v-for="dict in liquidList2" :key="dict.id" :label="dict.itemValue" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-form-item label="核算记录">
              <px-select v-model="queryParams.systemCode" placeholder="请选择厂区" clearable style="width: 210px" filterable>
                <px-option v-for="dict in liquidList3" :key="dict.id" :label="dict.itemValue" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </px-col>
    </px-row>

    <px-row style="height: 366px; margin-top: 16px">
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'产品碳排放总览'" />
          <div class="model_chart" style="margin-top: 16px">
            <co2e class="co2e" size="100" />
            <p class="co2ep1">单片产品碳排放量</p>
            <p class="co2ep2">986.51 <span>kgCO2e</span></p>
          </div>
        </div>
      </px-col>
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'生命周期碳排放量排行'" />
          <div class="model_chart" style="margin-top: 16px">
            <px-table :data="tableDatas" :border="false" stripe style="width: 100%; overflow-x: hidden" height="240">
              <px-table-column prop="taskNo" label="排行" center width="50" />
              <px-table-column show-overflow-tooltip :tooltip-effect="'light'" prop="taskName" label="排放源名称" />
              <px-table-column prop="responsible" label="碳排放量(kgCO₂e)" />
              <px-table-column prop="status" label="占比" />
            </px-table>
          </div>
        </div>
      </px-col>
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="'年度配额消耗趋势'" />
          <div class="model_chart" style="margin-top: 16px">
            <chartswwt style="width: 100%" :width="'100%'" :height="'320px'" />
          </div>
        </div>
      </px-col>
    </px-row>
    <px-row style="height: 366px; margin-top: 16px">
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'排放源碳排放排行'" />
          <div class="model_chart">
            <px-tabs v-model="activeWater" class="equipment-tabs" style="float: left; margin-top: 10px; margin-left: 0; background: none">
              <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
                <template #label>
                  <p class="pane-bottom">{{ item.label }}</p>
                  <p class="pane-line" />
                </template>
              </px-tab-pane>
            </px-tabs>
            <div class="model_chart">
              <px-table v-if="activeWater == 'first'" :data="tableData" :border="false" stripe style="width: 100%; overflow-x: hidden" height="238">
                <px-table-column prop="taskNo" label="排行" center width="50" />
                <px-table-column show-overflow-tooltip :tooltip-effect="'light'" prop="taskName" label="排放源名称" />
                <px-table-column prop="responsible" label="碳排放量(kgCO₂e)" />
                <px-table-column prop="status" label="占比" />
              </px-table>
              <px-table v-if="activeWater == 'two'" :data="tableData2" :border="false" stripe style="width: 100%; overflow-x: hidden" height="238">
                <px-table-column prop="taskNo" label="排行" center width="50" />
                <px-table-column show-overflow-tooltip :tooltip-effect="'light'" prop="taskName" label="排放源名称" />
                <px-table-column prop="responsible" label="碳排放量(kgCO₂e)" />
                <px-table-column prop="status" label="占比" />
              </px-table>
              <px-table v-if="activeWater == 'three'" :data="tableData" :border="false" stripe style="width: 100%; overflow-x: hidden" height="238">
                <px-table-column prop="taskNo" label="排行" center width="50" />
                <px-table-column show-overflow-tooltip :tooltip-effect="'light'" prop="taskName" label="排放源名称" />
                <px-table-column prop="responsible" label="碳排放量(kgCO₂e)" />
                <px-table-column prop="status" label="占比" />
              </px-table>
              <div v-if="activeWater == 'fore' || activeWater == 'five'" class="nodata">
                <px-empty :image-size="50" />
              </div>
            </div>
          </div>
        </div>
      </px-col>
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="'排放源碳排放占比'" />
          <div class="model_chart">
            <chartswwt2 v-if="activeWater == 'first'" style="width: 100%" :width="'100%'" :height="'330px'" />
            <chartswwt3 v-if="activeWater == 'two'" style="width: 100%" :width="'100%'" :height="'330px'" />
            <chartswwt4 v-if="activeWater == 'three'" style="width: 100%" :width="'100%'" :height="'330px'" />
            <div v-if="activeWater == 'fore' || activeWater == 'five'" class="nodata">
              <px-empty :image-size="50" />
            </div>
          </div>
        </div>
      </px-col>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartsParent from "./components/chartsParent.vue";
import chartswwt from "./components/chartswwt.vue";
import chartswwt2 from "./components/chartswwt2.vue";
import chartswwt3 from "./components/chartswwt3.vue";
import chartswwt4 from "./components/chartswwt4.vue";
import chartsUpwChemistry from "./components/chartsUpwChemistry.vue";
import chartsIndexUpw from "./components/chartsIndexUpw.vue";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import co2e from "@/assets/svg/file/co2e.svg?component";
const activeWater = ref("first");
const tabPaneList = [
  {
    label: "原材料",
    name: "first"
  },
  {
    label: "生产制造",
    name: "two"
  },
  {
    label: "分销与存储",
    name: "three"
  },
  {
    label: "产品示用",
    name: "fore"
  },
  {
    label: "废弃物处理",
    name: "five"
  }
];
const tableDatas = [
  {
    taskNo: "1",
    taskName: "生产制造",
    responsible: "844.65",
    status: "85.62%"
  },
  {
    taskNo: "2",
    taskName: "原材料",
    responsible: "79.61",
    status: "8.07%"
  },
  {
    taskNo: "3",
    taskName: "分销和存储",
    responsible: "62.25",
    status: "6.31%"
  },
  {
    taskNo: "4",
    taskName: "产品使用",
    responsible: "0",
    status: "0%"
  },
  {
    taskNo: "5",
    taskName: "废弃处理",
    responsible: "0",
    status: "0%"
  }
];
const tableData = [
  {
    taskNo: "1",
    taskName: "晶圆",
    responsible: "5.21",
    status: "6.54%"
  },
  {
    taskNo: "2",
    taskName: "光刻胶",
    responsible: "3.95",
    status: "4.97%"
  },
  {
    taskNo: "3",
    taskName: "清洗剂",
    responsible: "3.46",
    status: "3.24%"
  },
  {
    taskNo: "4",
    taskName: "研磨剂",
    responsible: "2.82",
    status: "3.54%"
  },
  {
    taskNo: "5",
    taskName: "研磨垫",
    responsible: "2.24",
    status: "2.82%"
  },
  {
    taskNo: "6",
    taskName: "其他",
    responsible: "61.93",
    status: "77.8%"
  }
];
const tableData2 = [
  {
    taskNo: "1",
    taskName: "外购热",
    responsible: "689.4",
    status: "81.62%"
  },
  {
    taskNo: "2",
    taskName: "外购电",
    responsible: "87.34",
    status: "10.34%"
  },
  {
    taskNo: "3",
    taskName: "天然气",
    responsible: "27.37",
    status: "3.24%"
  },
  {
    taskNo: "4",
    taskName: "ETCH-SF6",
    responsible: "13.18",
    status: "1.56%"
  },
  {
    taskNo: "5",
    taskName: "ETCH-CF4",
    responsible: "8.7",
    status: "1.03%"
  },
  {
    taskNo: "6",
    taskName: "其他",
    responsible: "18.66",
    status: "2.2%"
  }
];
const data = reactive({
  queryParams: {
    indicatorName: "",
    classCode: "",
    systemCode: "",
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    pageNum: 1,
    pageSize: 20
  }
});
const liquidList = [
  {
    itemValue: "全厂"
  },
  {
    itemValue: "一期"
  },
  {
    itemValue: "二期"
  }
];
const liquidList2 = [
  {
    itemValue: "产品1"
  },
  {
    itemValue: "产品2"
  },
  {
    itemValue: "产品3"
  }
];
const liquidList3 = [
  {
    itemValue: "产品1"
  },
  {
    itemValue: "产品2"
  },
  {
    itemValue: "产品3"
  }
];
const { queryParams } = toRefs(data);
const handleQuery = () => {};
const resetQuery = () => {};
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 30px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 calc(50% - 73px);
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

.co2e {
  position: absolute;
  top: 80px;
  left: 40px;
  width: 100px;
  height: 100px;
}

.co2ep1 {
  position: absolute;
  top: 100px;
  left: 160px;
  font-size: 20px;
  font-weight: 600;
}

.co2ep2 {
  position: absolute;
  top: 140px;
  left: 160px;
  font-size: 20px;
  font-weight: 600;

  span {
    font-size: 16px;
  }
}

.nodata {
  position: absolute;
  top: 31px;
  left: 0;
  width: 100%;
}
</style>
